<%+cbi/valueheader%>

<div style="display: flex; align-items: center;height: 30px;margin-top: 20px;">
	<label class="cbi-value" style="width: 110px;margin-top:10px;" for="ulfile"><%:Feature Library Update%>:</label>
	<input class="cbi-input-file" style="width: 400px" type="file" id="ulfile" name="ulfile" />
	<input type="submit" class="cbi-button cbi-input-apply " name="upload" value="<%:Upload%>"  onclick="showModal()"/>
	</div>

    <div id="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; justify-content: center; align-items: center;">
        <div style="background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; text-align: center; width: 200px; height: 100px; color: white; display: flex; justify-content: center; align-items: center;">
            <p style="margin: 0;color: white;"><%:Updating, please wait...%></p>
        </div>
    </div>
	<div style="margin-top: 10px;">
		<span style="color: gray;font-size: 13px;"><%:Feature library files can be downloaded from the official website. After downloading, upload to upgrade. Note the feature code format version, which needs to be consistent with the current feature code format!%></span>
	</div>
<%+cbi/valuefooter%>

<style>

</style>

<script>
    function showModal() {
        var modal = document.getElementById('modal');
        modal.style.display = 'flex'; // Show the modal

        setTimeout(function() {
            modal.style.display = 'none'; // Hide the modal after 10 seconds
        }, 15000); // 10000 milliseconds = 10 seconds
    }
</script>
